<template>
  <AppPage :show-footer="true">
    <div flex-1>
      <div flex class="screen">
        <n-card rounded-10 w-400 class="box1 fff">
          <div flex class="back">
            <div ml-20>
              <p text-16>今日就诊总人数</p>
              <div flex items-end>
                <p mt-5 text-60>{{ RegistrationCount.all_registration }}</p>
                <p mt-5 mb-10 text-16>人</p>
              </div>

            </div>
            <n-image class="dia-icon" :src="icon_jz" />
          </div>

        </n-card>
        <n-card rounded-10 w-400 class="box2 fff">
          <div flex class="back">
            <div ml-20>
              <p text-16>今日待就诊总人数</p>
              <div flex items-end>
                <p mt-5 text-60>{{RegistrationCount.wait_wegistration}}</p>
                <p mt-5 mb-10 text-16>人</p>
              </div>

            </div>
            <n-image class="dia-icon" :src="icon_jz" />
          </div>

        </n-card><n-card rounded-10 w-400 class="box3 fff">
          <div flex class="back">
            <div ml-20>
              <p text-16>今日已就诊总人数</p>
              <div flex items-end>
                <p mt-5 text-60>{{RegistrationCount.already_registration}}</p>
                <p mt-5 mb-10 text-16>人</p>
              </div>

            </div>
            <n-image class="dia-icon" :src="icon_jz" />
          </div>

        </n-card>

      </div>
      <n-card class=" flex-shrink-0  mb-10 mt-10 cursor-pointer" rounded-10 hover:card-shadow size="small">
        <n-data-table :columns="columns" :data="state.data" :pagination="pagination" :bordered="false" />
      </n-card>
    </div>
  </AppPage>
</template>

<script setup>
import { useUserStore } from '@/store'
import icon_jz from "./assets/images/icon_jz.png";
import api from './api'
import { NButton, useMessage ,NText} from "naive-ui";
import { reactive } from 'vue';
const userStore = useUserStore()

const router = useRouter()
const RegistrationCount = ref({
  all_registration: null,
  wait_wegistration: null,
  already_registration: null,
})
const createColumns = ({
  sendMail
}) => {
  return [
    {
      title: "挂号ID",
      key: "id_registration"
    },
    {
      title: "患者姓名",
      key: `patient.name_patient`
    },
    {
      title: "患者身份证号",
      key: `patient.identity_patient`
    },
    {
      title: "电话",
      key: `patient.phone_patient`
    },
    {
      title: "状态",
      key: `state_registration`,
      render (row) {
        if (row.state_registration == "1") {
          return h(
            NText, { depth: 1 },
            { default: () => '已就诊' }
          )
        } else {
          return h(
            NText, { depth: 1 },
            { default: () => '未就诊' }
          )
        }
      }
    },
    {
      title: "操作",
      key: "actions",
      render (row) {
        return h(
          NButton,
          {
            size: "small",
            onClick: () => sendMail(row)
          },
          { default: () => "修改" }
        );
      }
    }
  ];
};

// 列表对象展示
const columns = createColumns({
  sendMail (rowData) {
    // message.info("send mail to " + rowData.name);
    router.push({ path: "/diagnostic/detail", query: { id: rowData.id_registration } })
  }
})

const message = useMessage();
// 分页
const pagination = reactive({
  page: 2,
  pageSize: 5,
  showSizePicker: true,
  pageSizes: [3, 5, 7],
  onChange: (page) => {
    paginationReactive.page = page;
  },
  onUpdatePageSize: (pageSize) => {
    paginationReactive.pageSize = pageSize;
    paginationReactive.page = 1;
  }
});
// 列表数据
const state = reactive({
  data: []
});
// 获取数据
async function getData () {
  const { data } = await api.findAllRegistration()
  state.data = data
}
// 获取就诊与待就诊与已就诊
async function getRegistrationCount () {
  const { data } = await api.getRegistrationCount()
  RegistrationCount.value.all_registration = data.all_registration
  RegistrationCount.value.wait_wegistration = data.wait_wegistration
  RegistrationCount.value.already_registration = data.already_registration
}
//初始挂载
onMounted(() => {
  getData()
  getRegistrationCount()
})
</script>

<style lang="scss" scoped>
.back {
  display: flex;
  justify-content: space-between;
}
.screen {
  justify-content: space-between;
}
.box1 {
  background: linear-gradient(90deg, rgba(126, 167, 233, 1) 0, rgba(126, 231, 233, 1) 100%);
}
.box2 {
  background: linear-gradient(90deg, rgba(70, 181, 144, 1) 0, rgba(152, 245, 171, 1) 100%);
}
.box3 {
  background: linear-gradient(90deg, rgba(233, 126, 126, 1) 0, rgba(233, 126, 171, 1) 100%);
}
.fff {
  color: #fff;
}
.dia-icon {
  margin-top: 50px;
  margin-right: 35px;
  height: 60px;
  width: 50px;
}

.table-list {
  margin-top: 15px;
}
</style>